/*
 * @Author: syyao 
 * @Date: 2019-05-17 15:23:28 
 * @Last Modified by: syyao
 * @Last Modified time: 2019-06-12 23:20:24
 */
<style scoped>
.home {
  text-align: center;
  /* padding-top: 100px; */
  background-color: rgb(245, 247, 249);
}
/* .scroll-hidden /deep/ .ivu-scroll-container{
  overflow-y:visible;
} */
.bj-home {
  background-image: url(../assets/l-bj.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 200px;
  border-radius: 0px;
  margin-top: -10px;
}

.color,.backcolor{
  
}
</style>

<template>
    <Scroll
        class="scroll-hidden"
        :on-reach-bottom="handleReachBottom"
        :height="windowHeight"
        :distance-to-edge="distance"
    >
        <div class="home">
            <div class="bj-home">
                <p
                    class="animated fadeInRight"
                    style="font-size: 4vw;font-family: 'Avenir', Helvetica, Arial, sans-serif;padding-top:0.1vw;color:#fff"
                >iSee</p>
                <SearchWithTips
                    class="animated fadeInRight"
                    style="width: 50vw;margin:-0.6vw auto 0.5vw"
                ></SearchWithTips>
                <div
                    class="animated fadeInRight"
                    style="margin:0 auto 3vw auto;width: 30vw;height: 3vw;"
                >
                    <div
                        style="display:inline;margin: auto;"
                        v-for="(tag,index) in tags"
                        :key="index"
                    >
                        <Tag
                            style="height:20px"
                            type="border"
                            :color="color()"
                            v-on:click.native="findTag(tag)"
                        >
                            <span style="font-size:8px;line-height:20px;" >{{tag}}</span>
                        </Tag>
                    </div>
                </div>
            </div>

            <PictureView style="width: 85%;margin: auto;" :pictureList="pictureList"></PictureView>
        </div>
    </Scroll>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

import SearchWithTips from "../components/SearchWithTips";
import PictureView from "../components/PictureView";
import { watchFile } from "fs";

export default {
  name: "home",
  components: {
    PictureView,
    SearchWithTips
    // HelloWorld
  },
  methods: {
    test() {
      this.http.post(this, "/test1").then();
    },
    findTag(tag) {
      console.log(1);
      this.$router.push({
        path: "/pictureHub/search",
        query: {
          tag: tag
        }
      });
    }
  },
  data() {
    return {
      tags: [],
      pictureList: [],
      distance: -50,
      number:1
    };
  },
  created() {
    let _this = this;
    this.http.post(this, "/RecommendPicture").then(function(msg) {
      if (msg.data.code === "200") {
        _this.pictureList = JSON.parse(JSON.stringify(msg.data.data));
        let hash = {};
        _this.pictureList = _this.pictureList.reduce((item, next) => {
          if (!hash[next.id]) {
            hash[next.id] = true;
            item.push(next);
          }
          return item;
        }, []);
      }
    });
    this.http.post(this, "/HotTag").then(function(msg) {
      if (msg.data.code === "200") {
        _this.tags = JSON.parse(JSON.stringify(msg.data.data)).filter(function(s){
          return s && s.trim()
        })
      }
    });
  },
  watch: {
    // "$store.state.user.isLogin": function(newVal) {
    //   let _this = this;
    //   this.http.post(this, "/RecommendPicture").then(function(msg) {
    //     if (msg.data.code === "200") {
    //       _this.pictureList = JSON.parse(JSON.stringify(msg.data.data));
    //     }
    //   });
    // }
  },
  methods: {
    handleReachBottom() {
      let _this = this;
      return new Promise(resolve => {
        this.http.post(this, "/RecommendPicture").then(function(msg) {
          if (msg.data.code === "200") {
            _this.pictureList = _this.pictureList.concat(
              JSON.parse(JSON.stringify(msg.data.data))
            );
            let hash = {};
            _this.pictureList = _this.pictureList.reduce((item, next) => {
              if (!hash[next.id]) {
                hash[next.id] = true;
                item.push(next);
              }
              return item;
            }, []);
          }
          resolve();
        });
      });

    },
    findTag(tag) {
      this.$router.push({
        path: "/pictureHub/search",
        query: {
          tag: tag
        }
      });
    },
    color() {
      let colorList = [
        "cyan",
        "geekblue",
        "purple",
        "red",
        "orange",
        "magenta"
      ];

      let temp = Math.floor(Math.random() * 6);
      return colorList[temp];
    }
  },
  computed: {
    windowHeight() {
      return window.innerHeight;
    },
   
  }
};
</script>

